<template>
    <nut-tabs v-model="value" size="large" style="width:90%;margin-left: 5%;margin-top: 5%;border-radius: 5%;">
        <template #titles>
            <div v-for="item in list" :key="item.paneKey" class="custom-tab-item" @click="value = item.paneKey">

                <div class="custom-title" :class="{ active: value === item.paneKey }">
                    <image style="width:30px;height: 25px; margin-right: 10%;" :src="item.icon">
                    </image>{{ item.title }}
                </div>
                <div v-if="value == item.paneKey">
                    <image style="width:60px;height: 20px;margin-bottom: 10%;margin-left: 10%;"
                        src="https://cxj.szzkba.cn/upload/i/2024/06/04/181204.png">
                    </image>
                </div>
            </div>
        </template>
        <nut-tab-pane style="border-top: 0.5px solid rgb(174, 174, 174);" v-for="item in list" :key="item.paneKey"
            :pane-key="item.paneKey">
            <!-- <div>{{ item.title }} </div> -->
            <nut-card :is-need-price="false" :img-url="state.imgUrl" :title="state.title" :shop-desc="state.shopDesc"
                :delivery="state.delivery" :shop-name="state.shopName">
                <template #prolist>
                    <div class="card-tag-list">
                        <span class="tag">迎宾</span>
                        <span class="tag">引领+剪彩</span>
                    </div>
                </template>
                <template #footer>
                    <div class="card-foot"><span
                            style="font-size: 18px;color: red; font-weight: bold;margin-left: -20%;margin-right: 2%;">120</span><span
                            style="font-size: 14px;margin-right: 20%;">元/小时起</span> <nut-button color="#2b35fa"
                            size="mini" style="margin-right: -30%;">去下单</nut-button> </div>
                </template>
            </nut-card>
        </nut-tab-pane>
    </nut-tabs>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('c1')
const list = ref([
    {
        title: '服务',
        icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180234.png',
        paneKey: 'c1'
    },
    {
        title: '娱乐',
        icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180443.png',
        paneKey: 'c2'
    },
    {
        title: '运动',
        icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180153.png',
        paneKey: 'c3'
    }
])
const state = ref({
    imgUrl:
        'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg',
    title: '礼仪模特',
})
</script>
<style lang="scss" scoped>
.custom-tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 10%;
}

.custom-title {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(66, 66, 66);
    cursor: pointer;
    // margin-top: 40%;
}

.custom-title.active {
    color: black;
    font-weight: bold;
    margin-top: 40%;
}

.nut-tabs__titles .nut-tabs__list {
    background: white;
}

.card-tag-list {
    margin: 15% 0 1px;
    height: 30px;
    overflow: hidden;
}

.card-tag-list>.tag {
    float: left;
    padding: 0 10px;
    border-radius: 1px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    color: #999;
    background-color: #f2f2f7;
    margin-right: 5px;
}

.card-foot {
    margin-top: 5%;
}

.card-title {
    font-weight: bold;
}

.nut-card .nut-card__right .nut-card__right__title {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    line-height: 1.5;
    font-size: 0.9rem;
    font-weight: bold;
}
</style>